
import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    ScrollView,
    Image,
    Platform,
    StatusBar
} from 'react-native';

import Icon from '../../components/CustomIcons';
import SquareGrid from '../../components/SquareGrid';

import GlobalSearch from './GlobalSearch';

export default class Home extends Component{

    static navigationOptions = {
        title: '首页',
        header: null,
        tabBarIcon: ({ tintColor }) =>
            <Icon name="icon-home" size={24} color={tintColor} />
    };

    constructor(props){
        super(props);
        this.state = {};
    }

    _onMenuPress(rowData){
        var route = null;
        var parms = null;

        //发货库存
        if(rowData.name === 'inventory-out') {
            route = 'Inventory';
            parms = { type: 0 };
        }
        //到货库存
        else if(rowData.name === 'inventory-in'){
            route = 'Inventory';
            parms = { type: 1 };
        }else if (rowData.iconName == 'icon-pzzc'){
            route = 'LoadingStart';
        }

        if(route){
            this.props.navigation.navigate(route, parms);
        }
    }

    render(){

        const mainMenuData = [
            {
                "iconName": "icon-edit",
                "title": "录单",
                "color": "#f1574d"
            },
            {
                "iconName": "icon-scan",
                "title": "扫码开单",
                "color": "#1295d9"
            },
            {
                "name": "inventory-out",
                "iconName": "icon-inventory",
                "title": "发货库存",
                "color": "#01b7c4"
            },
            {
                "name": "inventory-in",
                "iconName": "icon-inventory",
                "title": "到货库存",
                "color": "#f29826"
            },
            {
                "iconName": "icon-pzzc",
                "title": "配载发车",
                "color": "#1c8fe0"
            },
            {
                "iconName": "icon-truck",
                "title": "到车管理",
                "color": "#1c8fe0"
            },
            {
                "iconName": "icon-sign",
                "title": "签收",
                "color": "#f1594b"
            },
            {
                "iconName": "icon-dfh",
                "title": "待发货",
                "color": "#f39726"
            }
        ];

        const extraMenuData = mainMenuData;

        return (
            <View style={{flex: 1}}>

                <StatusBar
                    animated={true} //指定状态栏的变化是否应以动画形式呈现。目前支持这几种样式：backgroundColor, barStyle和hidden
                    hidden={false}  //是否隐藏状态栏。
                    backgroundColor={'#2e93cb'} //状态栏的背景色
                    translucent={false}//指定状态栏是否透明。设置为true时，应用会在状态栏之下绘制（即所谓“沉浸式”——被状态栏遮住一部分）。常和带有半透明背景色的状态栏搭配使用。
                    barStyle={'light-content'} // enum('default', 'light-content', 'dark-content')
                ></StatusBar>
                <View style={styles.bannerContainer}>
                    <Image source={require('../../assets/images/banner.png')} style={styles.bannerStyle}/>

                    <View style={[styles.searchBoxContainer, {top: (Platform.OS === 'ios') ? 20 : undefined}]}>
                        <GlobalSearch placeholder="请输入运单号或收货人电话"/>
                    </View>
                </View>

                <ScrollView style={{flex: 1, backgroundColor: '#efeff4'}}>
                    <View style={styles.sgContainer}>
                        <View style={styles.sgTitleContainer}>
                            <Text style={styles.sgTitle}>主业务流程</Text>
                        </View>
                        <SquareGrid data={mainMenuData}
                                    onGridPress={(rowData)=>this._onMenuPress(rowData)}/>
                    </View>
                    <View style={styles.sgContainer}>
                        <View style={styles.sgTitleContainer}>
                            <Text style={styles.sgTitle}>其他应用与增值服务</Text>
                        </View>
                        <SquareGrid data={extraMenuData}
                                    onGridPress={(rowData)=>this._onMenuPress(rowData)}/>
                    </View>
                </ScrollView>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    bannerContainer: {
        width: '100%',
        height: 200
    },
    bannerStyle: {
        width: '100%',
        height: 200,
        resizeMode: 'cover'
    },
    searchBoxContainer: {
        position: 'absolute',
        width: '100%',
        height: 40
    },
    sgContainer: {
        backgroundColor: '#fff'
    },
    sgTitleContainer: {
        marginTop: 10,
        marginLeft: 10,
        paddingLeft: 5,
        borderLeftColor: 'red',
        borderLeftWidth: 3
    },
    sgTitle: {
        color: '#999',
        fontSize: 12,
    }
})